<template>
  <div>
    <c-title :hide="false" text="伙伴详情"></c-title>
    <div class="flex-col page">
      <div class="flex-col flex-1 group">
        <div class="flex-col">
          <div class="flex-row justify-between group_2">
            <div class="flex-row items-center">
              <img class="switch" style="border-radius: 50%" :src="items.avatar" />
              <div class="flex-col items-start ml-11-5">
                <span class="font text_2">{{ items.nickname }}</span>
              </div>
            </div>
            <div class="flex-row button section_3" @click="directPushuser(items.uid)">
              <img class="shrink-0 image_4" src="https://shops.cg500.com/static/newimg/17141169105188041283.png" />
              <span class="font_2 text_3 ml-3-5">直推用户({{ items.zhitui }})></span>
            </div>
          </div>
          <div class="flex-col section_4">
            <span class="self-start font_3 text_5">交易数据</span>
            <div class="flex-row justify-between equal-division mt-19-5">
              <div class="flex-col items-center">
                <span class="font_4">团队交易额(本月)</span>
                <div class="group_3 mt-15">
                  <span class="font_6">¥</span>
                  <span class="font_5">{{ items.benyue }}</span>
                </div>
              </div>
              <img class="horiz-divider" src="https://shops.cg500.com/static/newimg/04d2525ac18eecd0731cbfbbb51ffd0e.png" />
              <div class="flex-col items-center">
                <span class="font_4">团队交易额(上月)</span>
                <div class="group_4 mt-15">
                  <span class="font_6">¥</span>
                  <span class="font_5">{{ items.shangyue }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-22 flex-col">
          <span class="self-start font_3 text_6">本月交易明细</span>
          <div class="flex-col self-stretch mt-13-5">
            <div class="flex-col list-item mt-15" v-for="(item,index) in xiaji_order" :key="index">
              <div class="flex-row justify-between items-center group_5">
                <span class="font_3 flex-1">{{ item.title }}</span>
                <span class="font text_7">{{ item.price }}</span>
              </div>
              <div class="flex-row group_6">
                <span class="font_2">订单编号： {{ item.order_sn }}</span>
                <div class="ml-36 flex-row items-center shrink-0">
                  <img class="shrink-0 image_4" src="https://shops.cg500.com/static/newimg/7db4e0b82037a0a44ccab8b0460cf6a9.png" />
                  <span class="font_8 ml-3-5">{{ item.create_time }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import partnerDetailsController from "./partnerDetailsController";

export default partnerDetailsController;
</script>

<style>
  body {
    background-color: #f3f5f6;
  }
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "../common/common.css";
.ml-11-5 {
    margin-left: 11px;
  }
 
  .mt-19-5 {
    margin-top: 20px;
  }
  .mt-13-5 {
    margin-top: 13px;
  }
  .mt-15 {
    margin-top: 15px;
  }
  .ml-3-5 {
    margin-left: 3px;
  }
  
  .page {
    
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    padding: 17px 15px 103px;
    overflow-y: auto;
  }
  .group_2 {
    padding: 0 2px 12px;
  }
  .switch {
    width: 52px;
    height: 52px;
  }
  .font {
    font-size: 18px;
    font-family: PingFang SC;
    line-height: 15px;
    font-weight: 500;
    color: #151515;
  }
  .text_2 {
    line-height: 17px;
  }
  .font_2 {
    font-size: 12px;
    font-family: PingFang SC;
    line-height: 12px;
    color: #777777;
  }
  
  .button {
    align-self: flex-start;
    margin-top: 8px;
  }
  .section_3 {
    padding: 6px 7px;
    background-color: #ffffff;
    border-radius: 12px;
    height: 24px;
  }
  .image_4 {
    width: 12px;
    height: 12px;
  }
  .text_3 {
    color: #f46b2d;
  }
  .section_4 {
    padding: 15px 16px 26px;
    border-radius: 12px;
    background-image: url('https://shops.cg500.com/static/newimg/17141169105414505000.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .font_3 {
    font-size: 15px;
    font-family: PingFang SC;
    line-height: 15px;
    font-weight: 500;
    color: #151515;
    text-align: left;
  }
  .text_5 {
    color: #ffffff;
  }
  .equal-division {
    align-self: stretch;
    margin: 19px;
  }
  .font_4 {
    font-size: 13px;
    font-family: PingFang SC;
    line-height: 13px;
    color: #ffffff;
  }
  .group_3 {
    line-height: 18px;
  }
  .font_6 {
    font-size: 15px;
    font-family: PingFang SC;
    line-height: 12px;
    color: #ffffff;
  }
  .font_5 {
    font-size: 24px;
    font-family: PingFang SC;
    line-height: 18px;
    font-weight: 500;
    color: #ffffff;
  }
  
  .horiz-divider {
    width: 1px;
    height: 44px;
  }
  .group_4 {
    line-height: 18px;
  }
  .text_6 {
    margin-left: 5px;
  }
  .list-item {
    padding: 14px 12px 14px 14px;
    background-color: #ffffff;
    border-radius: 12px;
  }
  .list-item:first-child {
    margin-top: 0;
  }
  .group_5 {
    padding-left: 2px;
  }
  .text_7 {
    line-height: 14px;
  }
  .group_6 {
    margin-top: 13px;
  }
  .font_8 {
    font-size: 12px;
    font-family: PingFang SC;
    line-height: 10px;
    color: #777777;
  }
  
 
  
</style>